<template>
  <!-- 轮播图 -->
  <view>
    <view class="searchbox">
      <my-search @click="gotosearch"></my-search>
    </view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item, i) in swiperlist" :key="i">
        <navigator class="swiper-item" :url="`/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`"> <!-- 导航标签会挑战页面 -->
          <image :src="item.image_src" ></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 分类 -->
    <view class="nav">
      <view v-for="(item,index) in navlist" :key="index" @click="dianjifenlei(item)">
        <image :src="item.image_src" class="nav_image"></image>
      </view>
    </view>
    <!-- 楼层容器 -->
   <view class="floorrongqi">
    <view class="floor_item" v-for="(item,i) in floorlist" :key="i">
      <!-- 楼层标题 -->
      <view class="floortitle">
        <image :src="item.floor_title.image_src" ></image>
      </view>
      <!-- 楼层图片 -->
      <view class="floorimage">
        <!-- 左边图片区 -->
        <!-- 使用导航标签点击图片就会导航到goodlist页面 -->
        <navigator class="leftimage" :url="item.product_list[0].url">
          <image :src="item.product_list[0].image_src" mode="widthFix" :style="{width:item.product_list[0].image_width+'rpx'}"></image>
        </navigator>
        <!-- 右边图片区 -->
        <view class="rightimage" >
          <navigator v-for="(item2,index) in item.product_list" :key="index" v-if="index !=0" :url="item2.url">
            <image :src="item2.image_src" mode="widthFix" :style="{width:item2.image_width+'rpx'}"></image>
          </navigator>
        </view>
      </view>
     
     
    </view>
   </view>
  </view>
</template>

<script>
import minbadge from '@/mixins/tabbadge.js'
export default {
  //mixins是vue的一个属性所以建文件夹也要改
    mixins:[minbadge],
    data() {
      return {
        //用来装轮播图数据的
        swiperlist:[],
        navlist:[],
        floorlist:[]
      };
    },
    onLoad() {
      //页面加载时执行请求轮播图数据的方法
      //this.getlist('/api/public/v1/home/swiperdata',"swiperlist")
      uni.$getlistdata([uni.url_t.homeswiper],"swiperlist",this)
      uni.$getlistdata([uni.url_t.homecate],"navlist")
      uni.$getlistdata([uni.url_t.homefloor]).then(res=>{
        this.updatalist(res)
        this.floorlist=res
      })
    },
    methods:{
      updatalist(res){
        res.forEach(item=>{
          item.product_list.forEach(item1=>{
            item1.url='/subpkg/goods_list/goods_list?'+item1.navigator_url.split('?')[1]
            })
          })
        },
      //点击分类跳转分类页面
      dianjifenlei(item){
        if(item.name==='分类'){
          uni.switchTab({
            url:'/pages/cate/cate'
          })
        }
      },
      gotosearch(){
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
      }    
    }
  }
</script>

<style lang="scss">
  swiper{
    height: 330rpx;
    .swiper-item,
    image{
      width: 100%;
      height: 100%;
    }
    
  }
  .nav{
    margin: 30rpx 0;
    display: flex;
    justify-content: space-around;
    .nav_image{
      width: 128rpx;
      height: 140rpx;
    }
  }
  .floortitle{
    image{
      height: 50rpx;
      width: 100%;
    }
  }
  .floorimage{
    padding-left: 15rpx;
    display: flex;
  }
  .rightimage{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .searchbox{
    
    position: sticky;
    top:0;
    //层级999最高层
    z-index: 999;
  }

</style>
